25. Exercise: Add ViewModel to Data Binding

Update note:
At timestamp 03:17, the video above shows a now deprecated class ViewModelProviders in GameFragment.kt

viewModel = ViewModelProviders.of(fragment:this).get(GameViewModel::class.java).


Instead, please use the ViewModelProvider as

viewModel = ViewModelProvider(fragment:this).get(GameViewModel::class.java).

Now it’s your turn to complete this exercise yourself.

In this exercise, you're going to use data binding in the layout xml code to communicate directly with the ViewModel. In particular, we're going to tell the ViewModel when various buttons are clicked!

1. Add a GameViewModel data binding variable to GameFragment layout:

In the layout xml file for the GameFragment (game_fragment.xml), create a gameViewModel variable inside the layout. For example:

<data>
    <variable
        name="gameViewModel"
        type="com.example.android.guesstheword.screens.game.GameViewModel" />
</data>

You should rebuild the code so all of the generated data binding code is regenerated.

2. In the GameFragment layout, use the view model variable and data binding to handle clicking:

In xml, you can define an onClick attribute for buttons. Using data binding, you can define a data binding expression which is a Listener binding. Essentially this means that you define the OnClickListener in the xml. You also have your view model variable available via data binding. So to create an onClick attribute that will call onSkip in the view model, you can use:

android:onClick="@{() -> gameViewModel.onSkip()}"

Update both the Correct and Skip buttons to call the appropriate methods in the view model when clicked.

3. Pass the GameViewModel into the data binding:

In the GameFragment.onCreate, pass in the view model to the GameFragmentBinding.

binding.gameViewModel = viewModel

Now you can (and should) remove the OnClickListener setup from the GameFragment. Everything should work just as before.

4. Add a ScoreViewModel data binding variable to ScoreFragment layout:

In score_fragment.xml, repeat the process you used for game_fragment.xml in Step 1.

5. In the ScoreFragment layout, use the view model variable and data binding to handle clicking.

6. Pass the ScoreViewModel into the data binding and remove OnClickListener setup for playAgainButton.

Now instead of defining OnClickListener code in the fragment, you're using data binding. Run your app and see how all the buttons still work.

If you want to start at this step, you can download this exercise code from: Step.08-Exercise-Add-ViewModel-to-Data-Binding.

You will find plenty of //TODO comments to help you complete this exercise, and if you get stuck go back and watch the video again.

Once you’re done, you can check your solution against the solution we’ve provided here Step.08-Solution-Add-ViewModel-to-Data-Binding or using this git diff.

Reference documentation

• Documentation - Layouts and binding expressions
• Documentation - Listener bindings
• Documentation - Use ViewModel to manage UI-related data